<link rel="stylesheet" href="/sources/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="/sources/layui/css/layuimini.css" media="all" />
<script type="text/javascript" src="./../../../js/providers/plupload.full.min.js"></script>
<script type="text/javascript" src="/sources/layui/layui.js"></script>
<script type="text/javascript" src="/sources/layui/layui.js?v=1.0.4" charset="utf-8"></script>

<div class="layui-fluid">
  <div class="layui-card" style="margin: 15px 0;">
    <div class="layui-card-body">

      <form class="layui-form" action="">

        <div class="layui-form-item">
          <label class="layui-form-label" style="width: 130px; font-size: 18px; font-weight: bold;"><h3>添加解决方案</h3></label>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">方案编码</label>
          <div class="layui-input-inline">
            <input type="text" name="sid" id="sid" required disabled lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">方案名称</label>
          <div class="layui-input-inline">
            <input type="text" name="title" id="title" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">行业</label>
          <div class="layui-input-inline">
            <select name="area" lay-verify="area" id="area" lay-search>
              <option value="">请选择</option>
            </select>
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">应用场景</label>
          <div class="layui-input-inline">
            <select name="scenario" lay-verify="scenario" id="scenario" lay-search>
              <option value="">请选择</option>
            </select>
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">方案描述</label>
          <div class="layui-input-block">
            <input type="text" name="des" id="des" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">缩略图</label>
          <div class="layui-input-block">
            <div class="layui-upload">
              <button type="button" class="layui-btn" id="test2">缩略图图片上传</button> 
              <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list" id="demo2"></div>
             </blockquote>
            </div>
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">技术架构</label>
          <div class="layui-input-block">
            <div class="layui-upload">
              <button type="button" class="layui-btn" id="test3">技术架构图片上传</button> 
              <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list" id="demo3"></div>
             </blockquote>
            </div>
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">上传视频</label>
          <button type="button" class="layui-btn cover" id="control_video_button">上传视频</button>
          <button type="button" class="layui-btn layui-btn-danger cover" id="control_video_del" style="display: {$detail.control_video ? 'inline' : 'none'}">删除视频</button>
          <input type="hidden" id="control_video" value="{$detail.control_video}" name="control_video"/>
          <input type="hidden" id="temp_url_id" value="" name="temp_url_id"/>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <div class="layui-input-block">
            <video src="{$detail.control_video}" controls="controls" id="control_video_demo" style="width: 50%;display: {$detail.control_video ? 'block' : 'none'}">您的浏览器不支持 video 标签。</video>
            <p id="demoText"></p>
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">提供单位</label>
          <div class="layui-input-inline">
            <input type="text" name="unit" id="unit" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">联系电话</label>
          <div class="layui-input-inline">
            <input type="text" name="phone" id="phone" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">邮箱</label>
          <div class="layui-input-inline">
            <input type="text" name="email" id="email" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">主页</label>
          <div class="layui-input-inline">
            <input type="text" name="website" id="website" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
          </div>
        </div>

      </form>

    </div>
  </div>
</div>

<script>
  layui.use(['upload', 'element', 'layer', 'form'], function(){
    var $ = layui.jquery
    ,upload = layui.upload
    ,element = layui.element
    ,form = layui.form
    ,layer = layui.layer;

    // 生成方案编码
    (function(){
      let myDate = new Date();
      let year = myDate.getFullYear();
      let month = myDate.getMonth() + 1;
      let day = myDate.getDate();
      let hour = myDate.getHours();
      let minute = myDate.getMinutes();
      let second = myDate.getSeconds();
      let code = 'S'.concat(year, month, day, hour, minute, second);
      $("#sid").val(code);
    }())

    // 行业列表 下拉框
    $.ajax({
      url: 'http://124.133.35.234:8000/solution/getareaslist',
      type: 'post',
      dataType: 'json',
      success: function (res) {
        $.each(res.data, function (index, item) {
          $('#area').append(new Option(item.areas, item.areas));// 下拉菜单里添加元素
        });
        layui.form.render("select");
      }
    })

    // 应用场景列表 下拉框
    $.ajax({
      url: 'http://124.133.35.234:8000/solution/getscenarioslist',
      type: 'post',
      dataType: 'json',
      success: function (res) {
        $.each(res.data, function (index, item) {
          $('#scenario').append(new Option(item.scenarios, item.scenarios));// 下拉菜单里添加元素
        });
        layui.form.render("select");
      }
    })
    
    //缩略图上传
    upload.render({
      elem: '#test2'
      ,url: 'http://124.133.35.234:8000/solution/uploadfile' //改成您自己的上传接口
      ,data: {
        tablename: '0',
        type: '0',
        sid: $("#sid").val()
      }
      ,multiple: true
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 95px; height: 95px; margin-right: 7px;">')
        });
      }
      ,done: function(res){
        //上传完毕
        layer.msg('上传成功');
        console.log(res)
      }
    });

    //技术架构上传
    upload.render({
      elem: '#test3'
      ,url: 'http://124.133.35.234:8000/solution/uploadfile' //改成您自己的上传接口
      ,data: {
        tablename: '0',
        type: '0',
        sid: $("#sid").val()
      }
      ,multiple: true
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#demo3').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 95px; height: 95px; margin-right: 7px;">')
        });
      }
      ,done: function(res){
        //上传完毕
        layer.msg('上传成功');
        console.log(res)
      }
    });

    // 视频材料
    var uploadInst = upload.render({
      elem: '#control_video_button', //绑定元素
      url: 'http://124.133.35.234:8000/solution/uploadfile',//上传接口
      data: {
        tablename: '0',
        type: '1',
        sid: $("#sid").val()
      },
      accept: 'video'
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#control_video_demo').attr('src', result); //图片链接（base64）
          $('#control_video_demo').css('display','block');
          $('#control_video_del').css('display','inline');
        });
      },
      done: function(res){
        console.log(res);

        //如果上传失败
        if(res.code != 1){
          return layer.msg('上传失败');
        }
        //上传成功
        document.getElementById("control_video").value = res.filename;
        document.getElementById("temp_url_id").value = res.msg;

      },error: function(res){
        console.log(res);
        //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
          uploadInst.upload();
        });
      }
    });

    $('#control_video_del').click(function(){
      $('#control_video_demo').css('display','none');
      $('#control_video_del').css('display','none');
      $('#control_video').val('');
    })

    form.on('submit(formDemo)', function(data){
      console.log(data);
      $.ajax({
        url: 'http://124.133.35.234:8000/solution/AddSolution',
        type: 'post',
        dataType: 'json',
        data: {
          sid: data.field.sid,
          title: data.field.title,
          des: data.field.des,
          area: data.field.area,
          scenario: data.field.scenario,
          unit: data.field.unit,
          phone: data.field.phone,
          email: data.field.email,
          pic: '',
          upfile: '',
          createby: ''
        },
        success: function (res) {
          console.log(res);
          // layer.close(layer.index);
          // layer.msg('添加成功', {
          //     time: 1000 
          //   }, function () {
          //   window.parent.location.reload();
          // });
        }
      })

      return false;
    });
    
  });

  
</script>
